<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spinner Test Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui.spinner.js"></script>
<style type="text/css">
body {
	background: #fff;
	font-family: Arial;
}
label {
	float: left;
	margin-right: .5em;
	padding: .15em 0;
	font-weight: bold;
}
.ui-spinner {
	width: 100px;
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid #999;
	background: #FEFEFE url(images/spinner-bg.gif) repeat-x left bottom;
	padding: 0 0 0 5px;
}
.ui-spinner-disabled {
	background: #F4F4F4;
	color: #CCC;
}
.ui-spinner-box {
	width: auto;
	height: 100%;
	float: left;
	font-size: 125%;
	border: none;
	padding: 0;
}
.ui-spinner-up, .ui-spinner-down {
	width: 20px;
	height: 50%;
	font-size: 0.5em;
	padding: 0;
	margin: 0;
	z-index: 100;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	right: 0;
	cursor: default;
	border: 1px solid #999;
	border-right: none;
	border-top: none;
}
.ui-spinner-up{
	top:0
}
.ui-spinner-down {
	bottom: 0;
	border-bottom: 0;
}
.ui-spinner-pressed {
	background: #FEFEFE;
}
.ui-spinner-list, .ui-spinner-listitem {
	margin: 0;
	padding: 0;
}
</style>
<script type="text/javascript">
$(function(){
	var opts = {
		's4': {}
	};

	for (var n in opts){
		$("#"+n).spinner(opts[n]);
	}
});
</script>
</head>

<body>
    <h1>jQuery UI Spinner Test Page</h1>
    <p>
        <label for="s4">Data List: </label>
        <ul id="s4">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
            <li>item 9</li>
            <li>item 10</li>
        </ul>
    </p>
</body>
</html>